<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/problem.css">
    <title>平台手册</title>
</head>
<body>
<div class="problem-box">

</div>
</body>
<script src="__JS__/jquery.min.js"></script>
<script type="text/javascript">
    var page = 1, //分页码
        off_on = false, //分页开关(滚动加载方法 1 中用的)
        timers = null; //定时器(滚动加载方法 2 中用的)

    var Loadpage = function(page) {
        $.ajax({
            type:'post',
            url:'/index/set/notebook.html',
            data:{pageNo:page,pageSize:10},
            success:function (data){
                var dom = '';
                for (var p of data.data ) {
                    dom += `
                      <div class="problem-item">
                        <div class="item-title">
                            <p>${p.title}</p>
                            <img src="__IMG__/right.png" alt="">
                        </div>
                        <div class="item-conten">
                            <div>
                                ${p.desc}
                            </div>
                            <a>收起</a>
                        </div>
                    </div>
                        `
                }
                $('.problem-box').append(dom);

                //手风琴展开样式
                $('.problem-item:first-child>.item-conten').css( 'display' ,'block')
                    .parents('.problem-item').children('.item-title').children('img').css('transform', 'rotate(90deg)');
                $('.problem-box').on('click','.item-title',function (e) {

                    if($(e.target).parent(".item-title").length!=0){tar=$(e.target).parent()}else{tar=$(e.target);}

                    tar.children('img').css('transform', 'rotate(90deg)')
                        .parent().parent().siblings().children('.item-title').children('img').css('transform', 'rotate(0deg)');
                    tar.next().css( 'display' ,'block').parent().siblings().children('.item-conten').css('display' ,'none');
                })
                $('.problem-item').click('.item-conten>a',function (e) {
                    $(e.target).parent('.item-conten').css('display' ,'none');
                    $(e.target).parent().parent().children('.item-title').children('img').css('transform', 'rotate(0deg)');
                })
                //手风琴展开样式
            },
            error:function () {alert(data.msg);}
        });
        off_on = true;
    };
    $(document).ready(function() {
        Loadpage(1);
    });
    $(window).scroll(function() {
        if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
            clearTimeout(timers);
            timers = setTimeout(function() {
                page++;
                // console.log("第" + page + "页");
                Loadpage(page);
            }, 300);
        }
    });
</script>
</html>